<template>
    <div class="login" id="login">
        <div class="header">
            <div class="logo">
                <div class="logo-box">
                    <img src="./../../../static/img/logo.png" class="logo-img" alt="">
                </div>
                <div class="name">
                    仁青益寿后台管理系统
                </div>
            </div>
        </div>
        <div class="content" id="content" style="display: block">
            <div class="login-box">
                <h2 class="login-title">登录</h2>
                <div class="login-form">
                    <input v-model="username" ref="username" type="text" class="username" id="username" autocomplete="off" placeholder="用户名/账号" @blur="blur(0)">
                    <input v-model="password" ref="password" type="password" class="password" autocomplete="off" id="password" placeholder="密码" @blur="blur(1)">
                    
                    
                    <p id="tips">{{message}}</p>
                    <div class="login-btn" id="login-btn" @click="login">登&nbsp;&nbsp;录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CanvasParticle from './../../../static/lib/js/canvas-particle';
import img1 from './../../../static/img/1.jpg';
import img2 from './../../../static/img/2.jpg';
import img3 from './../../../static/img/3.jpg';
import * as api from './../../api/api'
export default {
    data() {
        return{
            username: null,
            password: null,
            imgArr: [img1,img2,img3],
            //--------滑动验证相关----------
            imgUrl: img1,//验证图片
            mouseDownFlag: false,//鼠标是否按下
            validationFlag: false,//是否开始验证
            mouseOverFlag: false,//鼠标是否移入
            showImg: false,//显示图片
            startX: 0,//鼠标按下初始横坐标
            startY: 0,//鼠标按下初始纵坐标
            X: 0,//鼠标移动横坐标
            Y: 0,//鼠标移动纵坐标
            slideLeft: 0,//滑块left值
            openAnimation: false,//滑块过度效果
            blank_left: 10,//空白区域left值
            blank_top: 10,//空白区域top值
            isSuccess: false,//是否验证成功
            message: '',//提示信息
        }
    },

    //计算属性
    computed: {
        
    },

    //钩子函数（页面挂载完成时触发）
    mounted() {
        // this.createCanvas();
        // this.randomBlank();
        // this.getBackGroundImg();
    },

    //自定义方法
    methods: {
        
        //验证
        blur(id) {
            if(id === 0 && !this.username){
                this.message = '请输入用户名';
            }else if(id === 0 && this.username && this.message === '请输入用户名') {
                this.message = '';
            }else if(id === 1 && !this.password){
                this.message = '请输入密码';
            }else if(id === 1 && this.password && this.message === '请输入密码') {
                this.message = '';
            }
        },
        //登录
        login() {
            let vm = this;
            if(!vm.username){
                vm.message = '请输入用户名';
            }else if(!vm.password){
                vm.message = '请输入密码';
            }else {
                let body={
                    admin_account:vm.username,
                    admin_password:vm.password
                };
                api.postLogin(body).then(res=>{
                    if(res.data.code==200){
                        sessionStorage.setItem("h_token",res.data.data.token)
                        sessionStorage.setItem("u_id",res.data.data.id)
                        sessionStorage.setItem("models",res.data.data.models)
                        vm.$router.replace({name:'systemSetting'});
                    }
                });
            }
        },
        
    },
}
</script>

<style lang="scss" scoped>
#login {
  height: 100%;
  width: 100%;
  .header {
    height: 50px;
    width: 100%;
    background-color: #333;
    padding: 0 200px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    .logo {
      display: flex;
      .logo-box {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 5px;
        .logo-img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        color: #fff;
        margin-left: 20px;
        line-height: 50px;
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 16px;
      }
    }
  }
  .content {
    height: 100%;
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
    background-color: #363636;
    .login-box {
      width: 420px;
      height: 300px;
      padding: 20px 60px;
      box-sizing: border-box;
      background-color: #fafafa;
      border-radius: 10px;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 20;
      .login-title {
        color: #333;
        text-align: center;
      }
      .login-form {
        margin-top: 20px;
        position: relative;
        input {
          box-sizing: border-box;
          width: 100%;
          height: 38px;
          padding: 5px 5px;
          margin-top: 15px;
          border-radius: 3px;
          border: 1px solid #dcdcdc;
          outline: none;
          z-index: 20;
          position: relative;
          &:focus {
            border: 1px solid #1abc9c;
          }
        }
        
        #tips {
          height: 20px;
          color: red;
          margin-top: 30px;
          font-size: 14px;
          position: relative;
          top: -190px;
          &::before{
              content: '';
              clear: both;
              display: block;
          }
        }
        .login-btn {
          width: 100%;
          height: 38px;
          margin-top: 160px;
          background-color: #1abc9c;
          border-radius: 4px;
          text-align: center;
          line-height: 38px;
          font-weight: bold;
          position: relative;
          top: -170px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
